import React, { useEffect, useMemo, useState } from "react"
import { View, Button } from "@tarojs/components"


const Father: React.FC = () => {

    const [count, setCount] = useState(0)
    const [flag, setFlag] = useState<boolean>(false)

    // useMemo可以优化计算属性的性能，只有依赖项变化时才会触发计算，如果依赖项为空数组则只有初始化渲染的时候触发一次
    const countTips = useMemo(() => {
        console.log('触发计算属性的更新');
        return flag ? '标记值为true' : '标记值为false'
    }, [flag])

    return(<View className="page">
        <Button size="mini" onClick={() => setCount((val) => val+1)}>+1</Button>
        <Button size="mini" onClick={() => setFlag(val => !val)}>取反</Button>
        <View>{countTips}</View>
        <Son1 count={count}></Son1>
        <Son2 flag={flag}></Son2>
    </View>)

}

// React.memo可以用来优化组件性能，React.memo包裹后，只有props变化后才会触发该组件的重新渲染

const Son1:React.FC<{count: number}> = React.memo((props) => {
    useEffect(() => {
        console.log('count触发了Son1的渲染')
    })
    return(<View>{props.count}</View>)
})

const Son2:React.FC<{flag: boolean}> = React.memo((props) => {
    useEffect(() => {
        console.log('flag触发了Son2的渲染')
    })
    return(<View>{String(props.flag)}</View>)
})

export default Father